<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hello vue</title>
<style type="text/css">

</style>
</head>
<body>




<ul>
  <li>组件名字不支持驼峰命名法，所以大写成 - </li>
</ul>


<div id="app">

	 <my-com></my-com>


</div>









<br>
<script src="vue.js"></script>
<script type="text/javascript">

//1.1：创建Vue.extend Vue组件
  var com1 = Vue.extend({

      //通过模板渲染展示html结构
      template:'<h3>这是使用extend创建出来的组件</h3>'
  })

  //1.2:使用Vue.component('组件名'，Vue.extend创建出来的模板对象)
  //Vue.component('myCom1',com1)//myCom1驼峰命名的话在html中引用时需要变成my-com
  Vue.component("myCom",com1)






var vm = new Vue({
  el:"#app",

  data:{

  },
  
  methods:{

  },


})



</script>

	
</body>
</html>